<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本列表5</title>
</head>
<script type="text/javascript" src="../vue.js"></script>


<body>

<div id="root">
  <h2>人员列表</h2>
  <button @click="updateMei">点我更新马冬梅信息</button>
  <ul>姓名-年龄
    <li v-for="(person,index) of persons" :key="person.id">{{person.name}}-{{person.age}}--{{person.sex}}</li>
  </ul>
</div>


</body>

<script type="text/javascript">

  Vue.config.productionTip = false

  //用computed实现
  const vm = new Vue({
    el:'#root',
    data:{
      persons:[
        {id:'001',name:'马冬梅',age:18,sex:'女'},
        {id:'002',name:'周冬雨',age:14,sex:'女'},
        {id:'003',name:'周杰伦',age:13,sex:'男'},
        {id:'004',name:'温兆伦',age:15,sex:'男'},
      ],
    },
    methods:{
      updateMei(){
        // this.persons[0].name = '大司马'//奏效
        // this.persons[0].age = 50//奏效
        // this.persons[0].sex = '男'//奏效

        this.persons[0] = {id:'001',name:'大司马',age:58,sex:'男'}

      }
    }
  })
</script>
</html>